<template>
    <a-row style="padding: 0 0 25px 0">
 
    
    <a-col :span="5">
      <a-input v-model:value="Obgconstraint.value" placeholder="请输入要搜索的值" />
    </a-col>
    <a-col :span="1">

</a-col>
    <a-col :span="5">
      <a-input v-model:value="Obgconstraint.nickname" placeholder="请输入用户名" />
    </a-col>
    <a-col :span="1">

    </a-col>
    <a-col :span="5">
      <a-input v-model:value="Obgconstraint.username" placeholder="请输入用户昵称" />
    </a-col>
    <a-col :span="1">

    </a-col>
  
    <a-col :span="4">
      <a-button style="margin: 0px 0 0 0;" @click="search">搜索</a-button>
    </a-col>
  </a-row>


    <a-table :columns="columns" :data-source="list" :pagination="false">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          姓名
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'avatar'">
        <span>
       
        <img class="tpps" :src="record.avatar" alt="">
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
           
          <a>删除</a>
          <span>|</span>
          <a @click="showModal(record)">
            更改

          </a>
        </span>
     
      </template>
      
    </template>
  </a-table>
  <div>
    <a-modal
      v-model:visible="visible"
      title="更改"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
    <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
    <a-form-item label="姓名">
      <a-input v-model:value="formState.nickname" placeholder="请输入要更改的姓名" />
    </a-form-item>
    <a-form-item label="生日">
      <a-input v-model:value="formState.birthday" placeholder="请输入要更改的生日" />
    </a-form-item>
    <a-form-item label="性别">
      <a-radio-group v-model:value="formState.resource">
        <a-radio value="男">男</a-radio>
        <a-radio value="女">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="上传的头像">
        <pictures ref="Exposurer">

</pictures>
    </a-form-item>
  
  </a-form>
    </a-modal>
  
  </div>
  <a-pagination v-model:current="paging.current" :total="paging.total" @change="ChangePagination" />
</template>
<script lang="ts" setup>
import { onMounted,reactive,ref,toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
import {users,changes,Dictionaries,searchs} from '@/api/users/user'
import { SmileOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import pictures from '@/components/uploadPictures/list.vue'
let skip=ref<number>(0)
let limit=ref<number>(10)
let Obgconstraint=reactive({
    skip:0,
    limit:10,
    value:'',
    nickname:'',
    username:'',
    title:'今天'
  })
  let paging=reactive({
    current:1,
    total:0,
    // defaultPageSize:20,
    position: ['bottomCenter'],
    hideOnSinglePage:true
  })
  function ChangePagination(a:any,b:any){
      console.log(a)
      console.log(b)
      limit.value=b
      skip.value=(a-1)*b
      console.log(skip)
      defaults()
  }
  function search(){
    console.log('123')
    searchs({
        ...Obgconstraint
    }).then((res:any)=>{
        console.log(res)
    })
  }
const columns = [
  {
    title: '姓名',
    dataIndex: 'nickname',
    key: 'nickname',
  },
  {
    title: '头像',
    key: 'avatar',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
  },
  {
    title: '生日',
    key: 'birthday',
    dataIndex: 'birthday',
  },
  {
    title: '注册时间',
    key: 'register_date',
    dataIndex: 'register_date',
  },
  {
    title: '操作',
    key: 'action',
  },
];

let list= ref<any>([])
let user_id=ref<string>()

/**
 * 时间戳日期格式化
 * @param {Number} dateTime 时间戳
 * @param {string} fmt yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 长度大于一的有前导零 准确到 年月日时分秒
 * @returns  string
 */
 function timeFormat(dateTime = null, fmt = "yy-mm-dd") {
  // 如果 dateTime 为null , 获取当前的时间
  if (!dateTime) dateTime = Number(new Date());
  // 如果时间戳的长度为10，就 *1000
  if (dateTime.toString().length === 10) dateTime *= 1000;
  let date = new Date(dateTime);
  let ret;
  let opt = {
      "y+": date.getFullYear().toString(), // 年
      "m+": (date.getMonth() + 1).toString(), // 月
      "d+": date.getDate().toString(), // 日
      "h+": date.getHours().toString(), // 时
      "M+": date.getMinutes().toString(), // 分
      "s+": date.getSeconds().toString() // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };

  for (let k in opt) {
      ret = new RegExp(`${k}`).exec(fmt); //检索 fmt的k值，返回找到的值，并确定其位置
      if (ret) {
          // 用于replace方法 把 fmt对应的值替换成ret[1]，并且根据fmt值的长度判断是否需要前导零，padStart字符串前填充
          fmt = fmt.replace(ret[0], ret[0].length === 1 ? (opt[k]) : (opt[k].padStart(ret[0].length, '0')))
      }
  }
  return fmt
}
function Dictionariess(){
    Dictionaries().then((res:any)=>{
        console.log(res)
    })
}
function defaults (){
    message.loading({ content: '加载中...',duration: 2 });
    users({
        skip:skip.value,
        limit:limit.value
    }).then((res:any)=>{
        console.log(res)
        paging.total=res.total
        list.value=res.data.map((v:any)=>{
          v.register_date=timeFormat(v.register_date)
          return v
        })
        message.success('加载成功',)
        console.log(list.value)
    })
}
onMounted(()=>{
    defaults()
    Dictionariess()
})
interface FormState {
    nickname: string;
  birthday:string;
  resource: string;

}
const formState: UnwrapRef<FormState> = reactive({
    nickname: '',

      birthday:'',
      resource: '男',

    });
  
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);

    const showModal = (e:any) => {
      visible.value = true;
      console.log(e)
      user_id.value=e._id
      console.log(user_id.value)
    };
    let Exposurer = ref<any>(null)
    const handleOk = () => {
        confirmLoading.value = true;

        console.log(formState)
        let imgsrc = Exposurer.value.fileList.map((v: any) => {
    return 'http://toutiao.longxiaokj.com/' + v.response.key
  })
  
         imgsrc.join()
 
        changes({
            user_id:user_id.value,
            avatar:imgsrc,
            birthday:formState.birthday,
            nickname:formState.nickname,
            sex:formState.resource
        }).then((res:any)=>{
            console.log(res)
            visible.value = false;
        confirmLoading.value = false;
        message.success(res.msg)
        defaults()
        })
     
    
    };
</script>
<style scoped>
.tpps{
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
</style>